<template>
    <div>
        <el-tabs tab-position="left" style="height: 200px;" v-model="activeName" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in data" :key="index" :name="item.name" :label="item.name">
                {{ item.name }}
                <div>
                    <div v-for="(o,a) in items" :key="a" @click="getGoods">{{o.name}}</div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script>
export default {
    data() {
        return {
            data: [],
            activeName: 'second',
            items:[],
        }
    },
    methods: {
        getGoods(){
            this.$message('具体的商品列表')
        },
        handleClick(tab, event) {
            console.log(tab, event);
            console.log(tab.name)

            var d = this.data.filter(x=>x.name==tab.name)
            console.log(d)
            var s = d[0].children
            console.log(s)
            this.items = s
            
        },
        onloadData() {
            let url = 'http://localhost:5286/category'
            this.$http.get(url).then(res => {                
                this.data = res.data.data
            })
        }
    },
    mounted() {
        this.onloadData()
    }
}
</script>